<template>
    <div class="list">
      <!-- 头部 -->
			<div class="listHeader">
				<div class="search">
					<el-input class="searchInp" v-model="input" placeholder="输入app名称"></el-input>
          <el-button type="primary" @click="playAppName(input)">搜索</el-button>
				</div>
        <el-button class="developerExport" type="primary" @click="derive(input)">导出</el-button>
			</div>

      <!-- 内容 -->
      <div class="listContent">
        <el-table :data="developerList" fixed="center" border style="width: 100%">
          <el-table-column fixed prop="id" label="编号" width="90">
          </el-table-column>
          <el-table-column fixed prop="appName" label="app名称" width="">
          </el-table-column>
          <el-table-column fixed prop="appKey" label="appKey" width="180">
          </el-table-column>
          <el-table-column fixed prop="companyName" label="公司名称" width="">
          </el-table-column>
          <el-table-column fixed prop="loginName" label="登录邮箱" width="180">
          </el-table-column>
          <el-table-column fixed prop="mobile" label="手机号码" width="130">
          </el-table-column>
          <el-table-column fixed prop="managerName" label="联系人" width="120">
          </el-table-column>
          <el-table-column fixed prop="createtime" label="注册时间" width="120">
          </el-table-column>
          <el-table-column fixed prop="" label="操作" width="100">
            <template slot-scope="scope">
              <el-button  type="primary" size="small" @click="detailsClick(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed prop="" label="操作" width="100">
            <template slot-scope="scope">
						    <el-button type="text" size="small" @click="resetPassWord(scope.row.id)">密码重置</el-button>
             </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detailsMask" v-if="isShow"></div>
      <div class="detailsBox" v-if="isShow">
        <p style="height:50px; font-size:16px"> 产品名称:<el-input style="width:70%;float:right;margin-right:80px;" placeholder="请输入内容" v-model="detailsMessage.appName" :disabled="true"></el-input></p>
        <p style="height:50px; font-size:16px"> 公司名称 :<el-input style="width:70%;float:right;margin-right:80px;" placeholder="请输入内容" v-model="detailsMessage.companyName" :disabled="true"></el-input></p>
        <p style="height:50px; font-size:16px"> appKey :<el-input style="width:70%;float:right;margin-right:80px;" placeholder="请输入内容" v-model="detailsMessage.appKey" :disabled="true"></el-input></p>
        <p style="height:50px; font-size:16px"> appsecret :<el-input style="width:70%;float:right;margin-right:80px;;" placeholder="请输入内容" v-model="detailsMessage.appSecret" :disabled="true"></el-input></p>
        <p style="height:50px; font-size:16px"> 联系人 :<el-input style="width:70%;float:right;margin-right:80px;" placeholder="请输入内容" v-model="detailsMessage.managerName" :disabled="true"></el-input></p>
        <p style="height:50px; font-size:16px"> 注册邮箱 :<el-input style="width:70%;float:right;margin-right:80px;" placeholder="请输入内容" v-model="detailsMessage.loginName" :disabled="true"></el-input></p>
        <p style="height:50px; font-size:16px"> 手机号 :<el-input style="width:70%;float:right;margin-right:80px;" placeholder="请输入内容" v-model="detailsMessage.mobile" :disabled="true"></el-input></p>
        <p style="height:50px; font-size:16px"> 渠道链接 :<el-input style="width:70%;float:right;margin-right:80px;" placeholder="请输入内容（可修改）" v-model="detailsMessage.channelUrl" :disabled="false"></el-input></p>
        <p style="text-align:center">
          <el-button @click="cancelSave()" size="small" type="primary" >取消</el-button>
          <el-button @click="saveDetails(detailsMessage)" size="small" type="primary" >保存</el-button>
        </p>
      </div> 
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination 
        @current-change="handleCurrentChange" 
        :current-page.sync="currentPage1" 
        :page-size="10" 
        layout="total, prev, pager, next" :total="this.total">
        </el-pagination>
      </div>
      
    </div>
</template>

<script>
import http_url from "@/http/http";
export default {
  data() {
    return {
      input: "",
      developerList: [],
      pageSize: 10, //默认每页数据量
      page: 1, //分页开始页
      total: 0, //默认数据总数
      currentPage1: 1,
      detailsMessage: "",
      isShow: false,
      appName: ""
    };
  },
  mounted() {
    this.devList();
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.devList();
    },
    //查看详情
    detailsClick(row) {
      this.isShow = true;
      this.$http({
        method: "POST",
        url: http_url.BASE_URL + "/developer/load.do",
        data: `id=${row}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.detailsMessage = res.data.data;
          } else {
            this.$message({
              message: res.data.message,
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.$message({
            message: " 网络错误，请稍后再试！",
            type: "warning"
          });
        });
    },
    //初始化列表
    devList() {
      this.$http({
        method: "POST",
        url: http_url.BASE_URL + "/developer/pagelist.do",
        data: `page=${this.page}&rows=${this.pageSize}&appName=${this.appName}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.developerList = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: res.data.message,
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.$message({
            message: " 网络错误，请稍后再试！",
            type: "warning"
          });
        });
    },
    //密码重置
    resetPassWord(id) {
      this.$confirm("确定要重置密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            method: "POST",
            url: http_url.BASE_URL + "/developer/reset_pwd.do",
            data: `id=${id}`
          })
            .then(res => {
              if (res.data.code == 0) {
                this.$message({
                  message: res.data.message,
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.message,
                  type: "warning"
                });
              }
            })
            .catch(error => {
              this.$message({
                message: "网络错误，请稍后再试！",
                type: "warning"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消重置密码"
          });
        });
    },
    //取消保存
    cancelSave() {
      this.isShow = false;
    },
    //保存详情
    saveDetails(detailsMessage) {
      let saveDetails_id = detailsMessage.id;
      let saveDetails_url = detailsMessage.channelUrl;
      this.isShow = false;
      this.$http({
        method: "POST",
        url: http_url.BASE_URL + "/developer/update.do",
        data: `id=${saveDetails_id}&channelUrl=${saveDetails_url}`
      })
        .then(res => {
          if (res.data.code == -1) {
            this.$message({
              message: res.data.message,
              type: "success"
            });
          }
        })
        .catch(error => {
          this.$message({
            message: "网络错误，请稍后再试！",
            type: "warning"
          });
        });
    },
    // 输入app名称查询
    playAppName(appName) {
      this.appName = appName;
      this.devList();
    },
    //导出
    derive(para) {
      this.appName = para;
      window.location.href = encodeURI(
        encodeURI(
          http_url.BASE_URL + "/developer/export.do?appName=" + this.appName
        )
      );
    }
  }
};
</script>

<style lang="scss">
.list {
  width: 100%;
  height: calc(100% - 50px);
  padding: 10px;
  .detailsMask {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    z-index: 990;
    position: fixed;
    top: 0;
    left: 0;
  }
  .detailsBox {
    width: 600px;
    // height: 500px;
    padding: 30px;
    margin: 0 auto;
    background: #fff;
    position: absolute;
    left: calc(50% - 300px);
    top: calc(50% - 280px);
    z-index: 999;
  }

  .listHeader {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    .search button {
      position: absolute;
      left: 250px;
      top: 0;
    }
    .search .searchInp {
      width: 200px !important;
    }
    .developerExport {
      position: absolute;
      right: 100px;
      top: 0;
    }
  }
  .listContent {
    height: calc(100% - 150px);
    overflow-y: scroll;
    th,
    td {
      text-align: center;
    }
    td {
      font-size: 14px;
    }
  }
  .pagination {
    position: absolute;
    bottom: 50px;
    left: calc(50% - 145px);
    text-align: center;
  }
}
.el-table td,
.el-table th.is-leaf {
  text-align: center;
}
</style>
